package pages

import (
	"github.com/templui/templui/internal/ui/layouts"
	"github.com/templui/templui/internal/ui/modules"
	"github.com/templui/templui/internal/ui/showcase"
)

templ InputOtp() {
	@layouts.DocsLayout(
		"Input OTP",
		"Input field for one-time password/verification code entry.",
		[]modules.TableOfContentsItem{
			{
				ID:   "installation",
				Text: "Installation",
			},
			{
				Text: "Examples",
				ID:   "examples",
				Children: []modules.TableOfContentsItem{
					{
						Text: "Placeholder",
						ID:   "placeholder",
					},
					{
						Text: "With Label",
						ID:   "with-label",
					},
					{
						Text: "Custom Length",
						ID:   "custom-length",
					},
					{
						Text: "Password Type",
						ID:   "password-type",
					},
					{
						Text: "Custom Styling",
						ID:   "custom-styling",
					},
					{
						Text: "Form",
						ID:   "form",
					},
				},
			},
			{
				ID:   "api-reference",
				Text: "API Reference",
				Children: []modules.TableOfContentsItem{
					{
						ID:   "inputotp",
						Text: "InputOTP",
					},
					{
						ID:   "group",
						Text: "Group",
					},
					{
						ID:   "slot",
						Text: "Slot",
					},
					{
						ID:   "separator",
						Text: "Separator",
					},
				},
			},
		},
	) {
		@modules.PageWrapper(modules.PageWrapperProps{
			Name:        "Input OTP",
			Description: templ.Raw("Input field for one-time password/verification code entry."),
			Tailwind:    true,
			VanillaJS:   true,
			Breadcrumbs: modules.Breadcrumbs{
				Items: []modules.BreadcrumbItem{
					{
						Text: "Docs",
						Path: "/docs",
					},
					{
						Text: "Components",
						Path: "/docs/components",
					},
					{
						Text: "Input OTP",
					},
				},
			},
		}) {
			@modules.ExampleWrapper(modules.ExampleWrapperProps{
				ShowcaseFile:    showcase.InputOTPDefault(),
				PreviewCodeFile: "input_otp_default.templ",
			})
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Installation",
				ID:    "installation",
			}) {
				@modules.ComponentUsage(modules.ComponentUsageProps{
					ComponentName: "inputotp",
					JSFiles:       []string{"inputotp"},
				})
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Examples",
				ID:    "examples",
			}) {
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Placeholder",
					ShowcaseFile:    showcase.InputOTPPlaceholder(),
					PreviewCodeFile: "input_otp_placeholder.templ",
					ID:              "placeholder",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "With Label",
					ShowcaseFile:    showcase.InputOTPWithLabel(),
					PreviewCodeFile: "input_otp_with_label.templ",
					ID:              "with-label",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Custom Length",
					ShowcaseFile:    showcase.InputOTPCustomLength(),
					PreviewCodeFile: "input_otp_custom_length.templ",
					ID:              "custom-length",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Password Type",
					ShowcaseFile:    showcase.InputOTPPasswordType(),
					PreviewCodeFile: "input_otp_password_type.templ",
					ID:              "password-type",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Custom Styling",
					ShowcaseFile:    showcase.InputOTPCustomStyling(),
					PreviewCodeFile: "input_otp_custom_styling.templ",
					ID:              "custom-styling",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Form",
					ShowcaseFile:    showcase.InputOTPForm(),
					PreviewCodeFile: "input_otp_form.templ",
					ID:              "form",
				})
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "API Reference",
				ID:    "api-reference",
			}) {
				@modules.APILegend()
				<div id="inputotp" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "InputOTP",
						Description: "Main container for the OTP input component.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "\"\"",
								Description: "Unique identifier for the OTP input component",
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "\"\"",
								Description: "Additional CSS classes to apply to the container",
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "nil",
								Description: "Additional HTML attributes to apply to the container",
							},
							{
								Name:        "Value",
								Type:        "string",
								Default:     "\"\"",
								Description: "Current value of the OTP input",
							},
							{
								Name:        "Name",
								Type:        "string",
								Default:     "\"\"",
								Description: "Name attribute for the hidden input field",
							},
							{
								Name:        "HasError",
								Type:        "bool",
								Default:     "false",
								Description: "Whether the OTP input should display error styling",
							},
						},
					})
				</div>
				<div id="group" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Group",
						Description: "Container for grouping OTP slots together.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "\"\"",
								Description: "Unique identifier for the group element",
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "\"\"",
								Description: "Additional CSS classes to apply to the group",
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "nil",
								Description: "Additional HTML attributes to apply to the group",
							},
						},
					})
				</div>
				<div id="slot" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Slot",
						Description: "Individual input slot for a single character.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "\"\"",
								Description: "Unique identifier for the slot element",
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "\"\"",
								Description: "Additional CSS classes to apply to the slot",
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "nil",
								Description: "Additional HTML attributes to apply to the slot",
							},
							{
								Name:        "Index",
								Type:        "int",
								Default:     "0",
								Description: "Index position of this slot in the OTP sequence",
							},
							{
								Name:        "Type",
								Type:        "string",
								Default:     "text",
								Description: "Input type for the slot (text or password)",
							},
							{
								Name:        "Placeholder",
								Type:        "string",
								Default:     "\"\"",
								Description: "Placeholder text for the slot",
							},
							{
								Name:        "Disabled",
								Type:        "bool",
								Default:     "false",
								Description: "Whether the slot is disabled",
							},
						},
					})
				</div>
				<div id="separator">
					@modules.APITable(modules.APITableProps{
						Title:       "Separator",
						Description: "Visual separator between groups of slots.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "\"\"",
								Description: "Unique identifier for the separator element",
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "\"\"",
								Description: "Additional CSS classes to apply to the separator",
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "nil",
								Description: "Additional HTML attributes to apply to the separator",
							},
						},
					})
				</div>
			}
		}
	}
}
